<template>
<div id="app">
   <div class="big">
        <div class="banner"></div>
        <div class="mima">
            <div class="phone">
                <input type="text" placeholder="请输入用户名" id="userName" v-model="userName" @blur="blur1">
                <img src="../assets/img/教育APP切图/登录注册/用户名@2x.png" alt="" class="img1">
                <span class="w1" v-show="show1" style="color:green">输入正确</span>
                <span class="w1" v-show="!show1" style="color:red">格式错误</span>
            </div>
            <div class="phone">
                <input type="text" placeholder="请输入邮箱" id="mail" v-model="email">
                <img src="../assets/img/教育APP切图/登录注册/yx.png" alt="" class="img1">
                <span class="w2"></span>
            </div>
            <div class="phone">
                <input type="text" placeholder="请输入手机号" id="phone1" v-model="phone">
                <img src="../assets/img/教育APP切图/登录注册/手机@2x.png" alt="" class="img1">
                <span class="w3"></span>
            </div>
            <div class="phone">
                <input :type="type1" placeholder="请输入密码" id="password" v-model="word1">
                <img src="../assets/img/教育APP切图/登录注册/密码@2x.png" alt="" class="img1">
                <img src="../assets/img/教育APP切图/登录注册/眼睛@2x.png" alt="" class="eyec" v-show="close1" @click='close1=false'>
                <img src="../assets/img/教育APP切图/登录注册/眼睛-开@2x.png" alt="" class="eyeo" v-show="!close1" @click='close1=true'>
                <span class="w4"></span>
            </div>
            <div class="phone">
                <input :type="type2" placeholder="请再次输入密码" id="password2" v-model="word2" @blur="blur">
                <img src="../assets/img/教育APP切图/登录注册/密码@2x.png" alt="" class="img1">
                <img src="../assets/img/教育APP切图/登录注册/眼睛@2x.png" alt="" class="eyec2" v-show="close2" @click='close2=false'>
                <img src="../assets/img/教育APP切图/登录注册/眼睛-开@2x.png" alt="" class="eyeo2" v-show="!close2" @click="close2=true">
                <span class="w5" v-show="show5" style="color:green">{{text5}}</span>
                <span class="w5" v-show="!show5" style="color:red">{{text5}}</span>
            </div>
            <div class="agree">
                <p><span class="s1" v-show='confirm' @click="confirm=false"><img src="../assets/img/教育APP切图/登录注册/矩形4@2x.png" alt=""></span>
                    <span class="s2" v-show='!confirm' @click="confirm=true"><img src="../assets/img/教育APP切图/登录注册/选中@2x.png" alt=""></span>
                </p>
                <p>我已同意并阅读 <span>《蓝猫课程协议》</span> </p>
            </div>
        </div>
        <button @click="fun">立即注册</button>

    </div>
    <my-tip :text='text' v-show="$store.state.flag"></my-tip>
    <!-- 弹窗 -->
    <div class="tc">
        <div class="tc1">
            <p>请先勾选服务</p>
            <p class="tc2">确认勾选</p>
        </div>
    </div>
  </div>
</template>

<script>
import myTip from "@/components/myTip.vue"
import {listPoint} from '@/api/myRegister'
export default {
      components: {
      myTip
  },
  name: 'myRegister',
  data() {
      return {
          show1:'',
          phone:'',
          userName:"",
          email:"",
          word1:'',
          word2:'',
          close1:1,
          close2:1,
          confirm:true,
          text5:'',
          show5:0,
          text:'',
          flag:0,
          nameTest1:''
      }
  },
    computed:{
      type1(){
          return this.close1?"password":"text"
      },
      type2(){
          return this.close2?"password":"text"
      }
  },
  methods: {
   blur(){
       if (this.word1==this.word2&&this.word1!=='') {
           this.text5='输入正确';
           this.show5=1;
       }else{
           this.text5='两次密码输入不一致';
           this.show5=0;
       }
   },
   blur1(){
       let nameTest=/^[a-zA-Z0-9_-]{4,16}$/
       this.nameTest1=!nameTest.test(this.userName)
       console.log(!nameTest.test(this.userName));
       if(!nameTest.test(this.userName)){
            this.show1=0
       }else{
          this.show1=1
       }
   },
//    点击注册按钮
    fun(){
        if (this.confirm===true) {
            this.text='请先勾选';
            this.$store.state.flag=1
            setTimeout(() => {
            this.text='';
            this.$store.state.flag=0
            }, 1000);
        }else{
            if(this.userName===''){
              this.show1=0
                    return  
            }
            if(this.email===''){
                    return  
            }
            if(this.phone===''){
                    return  
            }
            if(this.word1===''){
                    return  
            }
                listPoint({
                userName:this.userName,
                email:this.email,
                phone:this.phone,
                password:this.word1,
                userPic:"",
            }).then(res=>{
                console.log(res);
                if(res.success==="注册成功"){
                        console.log(res.success);
                        this.$store.state.flag=1
                        this.text=res.success
                        setTimeout(() => {
                        this.text='';
                        this.$store.state.flag=0;
                        this.$router.push({
                        path:'/myLogin',
                        name:'登录'
                    })
                    }, 1000);
                }else{
                    this.$store.state.flag=1
                    this.text=res.err
                    setTimeout(() => {
                    this.text='';
                    this.$store.state.flag=0
                }, 1000);
                }
                
            }).catch(err=>{
          console.log(err);
            })
            }
        
  },

}
}
</script>
<style lang="scss" scoped>
.big {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.banner {
    width: 100%;
    height: 58rem;
    background-image: url(../assets/img/教育APP切图/登录注册/登录注册_01.png);
    background-size: 100% 58rem;
}

.mima {
    width: 100%;
    height: 60rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0 9rem;
}

.phone {
    position: relative;
    height: 8rem;
    input {
        width: 57.2rem;
        height: 6rem;
        border-bottom: 0.1rem solid #ccc;
        padding-left: 5rem;
    }
}

.mima a {
    color: #5064eb;
    border-bottom: 0.1rem solid #5064eb;
    font-size: 2rem;
}

.w1,
.w2,
.w3,
.w4,
.w5 {
    /* color: red; */
    font-size: 2rem;
}

.phone img {
    width: 3rem;
}

.img1 {
    position: absolute;
    left: 0;
    top: 1rem;
}

.phone>.eyec,
.eyec2 {
    position: absolute;
    top: 1rem;
    right: 0rem;
    height: 2.1rem;
}

.phone>.eyeo,
.eyeo2 {
    position: absolute;
    right: 0;
    top: 1rem;
    // display: none;
    height: 2.1rem;
}

.zc {
    height: 10rem;
    line-height: 10rem;
    font-size: 2.6rem;
    a {
        color: #145aee;
    }
}

.agree {
    width: 100%;
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 18rem;
    p:first-child span {
        width: 2rem;
        height: 2rem;
        margin-right: 0.5rem;
    }
}

.s1 img {
    width: 2rem;
    height: 2rem;
}

.s2 {
    img {
        width: 2rem;
        height: 2rem;
    }
    // display: none;
}

.agree p:last-child span {
    color: #145aee;
}

button {
    width: 63rem;
    height: 8.8rem;
    background: #5064eb;
    border-radius: 5rem;
    color: #fff;
    font-size: 3rem;
}


/* 弹窗 */

.tc {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
}

.tc1 {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 3rem;
    border-radius: 5rem;
    width: 60rem;
    height: 30rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
</style>